<template>
	<div class="wrapper">
	<swiper :options="swiperOption">
    <swiper-slide>
    	<img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1809/31/da037478f37cf202.jpg_750x200_a02cf862.jpg"/>
    </swiper-slide>
    <swiper-slide>
    	<img class="swiper-img" src="http://img1.qunarzz.com/piao/fusion/1811/d4/7fa0b173c269f802.jpg_750x200_b8d88f51.jpg"/>
    </swiper-slide>
    <div class="swiper-pagination"  slot="pagination"></div>
	</swiper>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				swiperOption: {
					pagination:".swiper-pagination",
					loop:true,
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@charset "utf-8";
	$fs:64px;
	html{
	    font-size: $fs;
	}
	@function r($px){
	    @return $px/$fs*1rem;   
		
	}
	.wrapper /deep/ .swiper-pagination-bullet-active{
		background: #fff;
		width: r(12px);
		height: r(12px);
	}
	.wrapper{
		width: 100%;
		height: 0;
		overflow: hidden;
		padding-bottom: 26.66%;
		.swiper-img{
			width: 100%;
		}
	}
</style>